<template>
  <el-dialog
    title="单元格配置"
    :visible.sync="dialogVisible"
    :width="dialogWidth"
    v-dialog-drag
    :before-close="cancelTable"
    custom-class="compact-cell-config-dialog"
  >
    <div class="dialog-content">
      <!-- 选择模式 -->
      <div class="selection-mode" v-if="showInfoAndValue === 1">
        <el-radio-group v-model="cellData.L_TP" size="small" @change="handleSelectPoint">
          <el-radio-button :label="2">
            <i class="el-icon-s-flag"></i>
            单测点
          </el-radio-button>
          <el-radio-button :label="3">
            <i class="el-icon-s-marketing"></i>
            多测点
          </el-radio-button>
        </el-radio-group>
      </div>

      <div class="dialog-body">
        <BoxWithTitle class="left-wrapper" title="测点" icon="&#xe6f2;" isOther v-if="showInfoAndValue === 1">
            <template #other>
                <el-select v-model="selectTreeType" placeholder="请选择" size="small" @change="handleChangeTreeType" style="width:140px">
                <el-option v-for="(item,index) in treeTypeList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </template>
            <div class="menu-tree">
                <treeMenu :treeData="menuList" name="lable" ref="lable" nodeKey="id" expandALL @menuLeftClick="handleNodeClick"/>
            </div>
        </BoxWithTitle>

        <div class="dialog-main">
          <div class="point-display">
            <div class="point-label">已选测点：</div>
            <div class="point-tags">
              <el-tag
                v-for="(tag, index) in cellData.pointName"
                :key="index"
                :closable="cellData.L_TP === 3 && showInfoAndValue === 1"
                @close="handleCloseTag(index)"
                size="small"
                type="info"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <div class="content-type">
            <el-radio-group v-model="cellData.TP" size="small">
              <el-radio-button :label="1" v-if="showInfoAndValue <= 2">
                <i class="el-icon-document"></i>
                测点信息
              </el-radio-button>
              <el-radio-button :label="2" v-if="showInfoAndValue === 3 || showInfoAndValue === 1">
                <i class="el-icon-data-line"></i>
                测点值
              </el-radio-button>
            </el-radio-group>
          </div>

          <!-- 测点信息面板 -->
          <div class="info-panel" v-show="cellData.TP === 1">
            <div class="panel-title">测点信息</div>
            <div class="panel-content">
              <p v-if="pointInfoList.length === 0" class="no-data">无数据</p>
              <div class="compact-scrollbar">
                <div
                  v-for="item in pointInfoList"
                  :key="item.id"
                  class="info-item"
                  :class="{ selected: item.field === cellData.field }"
                  @click="handleChangePointInfo(item.field)"
                >
                  <i class="el-icon-tickets"></i>
                  <span class="item-text">{{ item.name }}</span>
                </div>
              </div> 
            </div>
          </div>

          <!-- 测点值面板 -->
          <div class="value-panel" v-show="cellData.TP === 2">
            <div class="value-section">
              <div class="section-header">分量</div>
              <div class="section-content">
                <p v-if="pointCompList.length === 0" class="no-data">无数据</p>
                <div class="compact-scrollbar">
                  <div
                    v-for="item in pointCompList"
                    :key="item.id"
                    class="comp-item"
                    :class="{ selected: item.comp === cellData.comp }"
                    @click="handleChangePointComp(item.comp)"
                  >
                    <i class="el-icon-connection"></i>
                    <span class="comp-code">{{ item.comp }}</span>
                    <span class="comp-name">({{ item.compName }})</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="value-section">
              <div class="section-header">分量值</div>
              <div class="section-content">
                <p v-if="pointCompTypeList.length === 0" class="no-data">无数据</p>
                <div class="compact-scrollbar">
                  <div
                    v-for="item in pointCompTypeList"
                    :key="item.id"
                    class="comp-type-item"
                    :class="{ selected: item.ID === cellData.valueTypeID }"
                    @click="handleChangePointCompType(item)"
                  >
                    <i class="el-icon-reading"></i>
                    <span class="type-text">{{ item.Name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="time-settings-container" v-show="cellData.TP === 2">
            <div class="time-setting" v-if="cellData.ValueTypeEXP ==='V-1' || cellData.ValueTypeEXP == 'VD-1'">
                <div class="setting-label">时间跨度：</div>
                <div class="setting-control">
                    <div>
                        <el-input-number
                        v-model="cellData.timeLen"
                        :min="1"
                        :max="365"
                        size="mini"
                        controls-position="right"
                        class="compact-input"
                        ></el-input-number>
                        <span class="unit">天</span>   
                    </div>
                    <div class="quick-settings">
                        <span class="quick-label">快捷：</span>
                        <el-button 
                            v-for="day in [1, 7, 30, 90,180]" 
                            :key="day" 
                            size="mini" 
                            @click="cellData.timeLen = day"
                            :type="cellData.timeLen == day ? 'primary' : ''"
                            class="quick-btn"
                        >
                            {{ day }}天
                        </el-button>
                    </div>
                </div>
            </div>

            <div class="time-setting">
                <div class="setting-label">时间不变：</div> 
                <div class="setting-control">
                    <el-switch
                        v-model="seletedSign"
                        size="small"
                        active-color="#1890ff"
                        style="margin-top:4px"
                    />
                <div v-if="seletedSign" class="time-details">
                  <div class="mode-selection">
                    <span class="mode-label">模式：</span>
                    <el-radio-group v-model="cellData.dtModeID" size="mini">
                      <el-radio-button :label="4">截止时间</el-radio-button>
                      <el-radio-button :label="3">时间段</el-radio-button>
                    </el-radio-group>
                  </div>
                  
                  <div class="date-controls">
                    <el-date-picker
                      v-if="cellData.dtModeID === 4"
                      v-model="cellData.DT1"
                      type="date"
                      size="mini"
                      placeholder="选择日期"
                      value-format="yyyy/MM/dd"
                      class="compact-date-picker"
                    ></el-date-picker>
                    
                    <div v-if="cellData.dtModeID === 3" class="date-range">
                      <el-date-picker
                        v-model="cellData.DT1"
                        type="date"
                        size="mini"
                        placeholder="开始日期"
                        value-format="yyyy/MM/dd"
                        class="compact-date-picker"
                      ></el-date-picker>
                      <span class="date-separator">至</span>
                      <el-date-picker
                        v-model="cellData.DT1"
                        type="date"
                        size="mini"
                        placeholder="结束日期"
                        value-format="yyyy/MM/dd"
                        class="compact-date-picker"
                      ></el-date-picker>
                    </div>
                  </div>

                  <div class="date-quick-settings" v-if="seletedSign &&  (cellData.dtModeID == 3 || cellData.dtModeID == 4)">
                    <span class="quick-label">快捷日期：</span>
                    <div class="date-quick-buttons">
                      <el-button 
                        size="mini" 
                        @click="setQuickDate('today')"
                        class="quick-date-btn"
                      >
                        今天
                      </el-button>
                      <el-button 
                        size="mini" 
                        @click="setQuickDate('yesterday')"
                        class="quick-date-btn"
                      >
                        昨天
                      </el-button>
                      <el-button 
                        size="mini" 
                        @click="setQuickDate('week')"
                        class="quick-date-btn"
                      >
                        本周
                      </el-button>
                      <el-button 
                        size="mini" 
                        @click="setQuickDate('month')"
                        class="quick-date-btn"
                      >
                        本月
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>          
        </div>
    </div>
    <div class="dialog-footer" style="margin-top:10px">
        <el-button size="small" @click="cancelTable" round icon="el-icon-close" class="cancel-btn">取消</el-button>
        <el-button type="primary" size="small" @click="saveTable" round icon="el-icon-check" class="confirm-btn">保存配置</el-button>
        </div>
    </div>
  </el-dialog>
</template>

<script>
import BoxWithTitle from '@/components/base/BoxWithTitle.vue'
import treeMenu from '@/components/base/treeMenu.vue'
import {GetTreeStyle,GetTreeInstr,getPointInfoConfig,getPointCompType,getPointComps} from '@/api/https'
export default {
  name: 'CompactCellConfigDialog',
  components:{treeMenu,BoxWithTitle},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    stationId: {
      type: [String, Number],
      default: ''
    },
     showInfoAndValue:{
        type: [String, Number],
        default: ''
    },
    cellData:{
        type:Object,
        default:()=>{
            return {}
        }
    }
  },
  data() {
    return {
        dialogVisible: this.visible,
        treeTypeList:[],
        selectTreeType: '',
        menuList:[],
        pointInfoList:[],
        pointCompTypeList:[],
        pointCompList:[],
        selectPoint: '',
        selectPointComp: '',
        selectPointType:'',
        seletedSign: false,
    };
  },
  watch: {
    visible(newVal) {
    this.dialogVisible = newVal
        if(newVal){
            this.getMenuStyleList()
        }
    },
    dialogVisible(newVal) {
        this.$emit('update:visible', newVal)
    },
    cellData(newVal){
        if(newVal.sign == 3){
            this.seletedSign = true
        }else{
            this.seletedSign = false
        }
    }
  },
  computed: {
    dialogWidth() {
      switch (this.showInfoAndValue) {
        case 2: return '500px';
        case 3: return '800px';
        default: return '1050px';
      }
    }
  },
  methods: {
    getMenuStyleList(){
        GetTreeStyle(this.stationId).then(res=>{
          if(res.isSuccess){
            this.treeTypeList = res.data
            this.selectTreeType = res.data[0]
            this.handleGetTreeInstr()
            if(this.cellData.CODE_ID && this.cellData.CODE_ID.length > 0){
                this.getPointInfoData()
            }
          }else{
            this.treeTypeList = []
            this.selectTreeType = ''
          }
      });
    },
    handleGetTreeInstr(){
      GetTreeInstr(this.stationId,this.selectTreeType).then(res=>{
        if(res.isSuccess){
          this.menuList = res.data || []
        }else{
          this.menuList = []
        }
      })
    },
    getPointInfoData(){
      getPointInfoConfig({
        CodeID:this.cellData.CODE_ID[0]
      }).then(res=>{
        if(res.isSuccess){
          this.pointInfoList = res.data.pointInfo || []
        }
      })
      getPointCompType({
        CodeID:this.cellData.CODE_ID[0],
        tp:2
      }).then(res=>{
        if(res.isSuccess){
          this.pointCompTypeList = res.data.valueTypes
        }
      })
       getPointComps({
            CodeID:this.cellData.CODE_ID[0],
        }).then(res=>{
            if(res.isSuccess){
                this.pointCompList = res.data || []
            }
        })
    },
    handleNodeClick(data){
      if(this.cellData.L_TP == 2){
        this.cellData.pointName[0] = data.treeName
        this.cellData.CODE_ID[0] = data.codE_ID
      }else if(this.cellData.L_TP == 3){
        this.cellData.pointName.push(data.treeName)
        this.cellData.CODE_ID.push(data.codE_ID)
      }

      if(data.codE_ID != null){
        this.getPointInfoData()
      }
    },
    handleChangePointInfo(name){
      this.cellData.field = name
    },
    handleChangePointComp(data){
      this.cellData.comp = data
    },
    handleChangePointCompType(data){
      this.cellData.valueTypeID = data.ID
      this.cellData.ValueTypeEXP = data.Exp
    },
    setQuickDate(type) {
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);
      
      const startOfWeek = new Date(today);
      startOfWeek.setDate(today.getDate() - today.getDay());
      
      const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
      
      const formatDate = (date) => {
        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
      };

      switch (type) {
        case 'today':
          this.cellData.DT1 = formatDate(today);
          this.cellData.DT2 = ''
          this.cellData.dtModeID = 4
          break;
        case 'yesterday':
          this.cellData.DT1 = formatDate(yesterday);
          this.cellData.DT2 = ''
          this.cellData.dtModeID = 4
          break;
        case 'week':
          this.cellData.DT1 = formatDate(startOfWeek);
          this.cellData.DT2 = formatDate(today);
          this.cellData.dtModeID = 3;
          break;
        case 'month':
          this.cellData.DT1 = formatDate(startOfMonth);
          this.cellData.DT2 = formatDate(today);
          this.cellData.dtModeID = 3;
          break;
      }
    },
    handleSelectPoint() {
        this.cellData.CODE_ID = []
        this.menuList = []
        this.cellData.pointName = []
        this.handleGetTreeInstr()
    },
    handleChangeTreeType(val){
      this.selectTreeType = val
      this.handleGetTreeInstr()
    },
    handleCloseTag(index) {
        this.cellData.CODE_ID.splice(index,1)
        this.cellData.pointName.splice(index, 1);
    },
    cancelTable() {
      this.$emit('cancelTable');
    },
    saveTable(){
        this.$emit('saveTable',this.cellData,this.seletedSign)
    }
    
  }
};
</script>

<style lang="scss" scoped>
.compact-cell-config-dialog {
  border-radius: 6px;
  
  .dialog-content {
    padding: 0;
    .selection-mode {
      margin-bottom: 16px;
      text-align: center;
      padding: 12px;
      background: #f7f9fc;
      border-radius: 4px;
      
      ::v-deep .el-radio-group {
        .el-radio-button {
          .el-radio-button__inner {
            padding: 8px 16px;
            font-size: 12px;
            
            i {
              margin-right: 4px;
              font-size: 14px;
            }
          }
        }
      }
    }
    
    .dialog-body {
      display: flex;
      gap: 16px;
      height: 580px;
      
      .left-wrapper {
        width: 300px;
        border-radius: 4px;
        padding: 12px;
        border: 1px solid #f0f0f0;
        }
        .menu-tree{
            height: 56vh;
            overflow: auto;
        }
      
      .dialog-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .point-display {
          display: flex;
          align-items: flex-start;
          background: #f0f7ff;
          padding: 8px 12px;
          border-radius: 4px;
          border-left: 3px solid #1890ff;
          
          .point-label {
            font-weight: 600;
            font-size: 12px;
            white-space: nowrap;
            margin-top: 2px;
            color: #1f2d3d;
          }
          
          .point-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            
            .el-tag {
              border-radius: 20px;
            }
          }
        }
        
        .content-type {
          ::v-deep .el-radio-group {
            .el-radio-button {
              .el-radio-button__inner {
                padding: 8px 12px;
                font-size: 12px;
                
                i {
                  margin-right: 4px;
                  font-size: 12px;
                }
              }
            }
          }
        }
        
        .info-panel, .value-section {
          border: 1px solid #e6e6e6;
          border-radius: 4px;
          overflow: hidden;
          
          .panel-title, .section-header {
            background: #1890ff;
            padding: 8px 12px;
            font-weight: 600;
            color: white;
            font-size: 12px;
          }
          
          .panel-content, .section-content {
            padding: 8px;
            height: 180px;
            
            .no-data {
              text-align: center;
              color: #909399;
              padding: 20px;
              margin: 0;
              font-size: 12px;
            }
            
            .compact-scrollbar {
              height: 100%;
              overflow: auto;
            }
            
            .info-item, .comp-item, .comp-type-item {
              padding: 6px 8px;
              border-radius: 3px;
              margin-bottom: 4px;
              cursor: pointer;
              font-size: 12px;
              display: flex;
              align-items: center;
              
              i {
                margin-right: 6px;
                font-size: 12px;
                color: #1890ff;
              }
              
              &:hover {
                background: #f0f7ff;
              }
              
              &.selected {
                background: #1890ff;
                color: white;
                
                i {
                  color: white;
                }
                .comp-name {
                    color: white;
                }
              }
            }
            
            .comp-item {
              .comp-code {
                font-weight: 500;
                margin-right: 4px;
              }
              
              .comp-name {
                color: #606266;
                font-size: 11px;
              }
            }
          }
        }
        
        .value-panel {
          display: flex;
          gap: 12px;
          
          .value-section {
            flex: 1;
          }
        }
        
        .time-settings-container {
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding: 12px;
          background: #f9f9f9;
          border-radius: 4px;
          
          .time-setting {
            display: flex;
            align-items: flex-start;
            
            .setting-label {
              font-size: 14px;
              font-weight: 500;
              color: #606266;
              width: 80px;
              flex-shrink: 0;
              margin-top: 4px;
            }
            
            .setting-control {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 8px;
              
              .compact-input {
                width: 100px;
                margin-right: 8px;
              }
              
              .unit {
                font-size: 12px;
                color: #606266;
                margin-right: 12px;
              }
              
              .quick-settings {
                display: flex;
                align-items: center;
                margin-top: 6px;
                
                .quick-label {
                  font-size: 12px;
                  color: #606266;
                  margin-right: 8px;
                }
                
                .quick-btn {
                  margin-right: 6px;
                  padding: 4px 8px;
                  font-size: 11px;
                  min-height: 24px;
                }
              }
              
              .switch-label {
                font-size: 14px;
                color: #606266;
                margin-left: 8px;
              }
              
              .time-details {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 8px;
                width: 100%;
                
                .mode-selection {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  
                  .mode-label {
                    font-size: 12px;
                    color: #606266;
                    white-space: nowrap;
                  }
                }
                
                .date-controls {
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  
                  .compact-date-picker {
                    width: 100%;
                  }
                  
                  .date-range {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    .date-separator {
                      font-size: 12px;
                      color: #606266;
                    }
                    
                    .compact-date-picker {
                      flex: 1;
                    }
                  }
                }
                
                .date-quick-settings {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  margin-top: 6px;
                  
                  .quick-label {
                    font-size: 12px;
                    color: #606266;
                    white-space: nowrap;
                  }
                  
                  .date-quick-buttons {
                    display: flex;
                    gap: 6px;
                    
                    .quick-date-btn {
                      padding: 4px 8px;
                      font-size: 11px;
                      min-height: 24px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


::v-deep .el-dialog__body {
  padding: 16px;
}

.compact-input, .compact-date-picker {
  ::v-deep .el-input__inner {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }
  
  ::v-deep .el-input__icon {
    line-height: 28px;
  }
}

.compact-select {
  ::v-deep .el-input__inner {
    height: 26px;
    line-height: 26px;
    font-size: 12px;
  }
}

</style>